<template>
  <el-dialog :model-value="dialogVisible" :title="title" width="40%" align-center @closed="handleCancel">
    <el-timeline v-loading="loading">
      <el-timeline-item
        v-for="(activity, index) in data"
        :key="index"
        :icon="activity.icon"
        :size="activity.size"
        :type="activity.type"
        :timestamp="activity.time"
        placement="top"
      >
        <div class="task">
          <label class="label">流程节点</label>
          <span class="context">{{ activity.name }}</span>
        </div>
        <template v-if="!activity.active">
          <div class="user">
            <label class="label">{{ activity.vars.approveUser ? '审批人' : '申请人' }}</label>
            <span class="context">{{ activity.vars.approveUser || activity.vars.applyUserName }}</span>
          </div>
          <div v-if="activity.vars.approveComment">
            <label class="label">审批意见</label>
            <span class="context">{{ activity.vars.approveComment }}</span>
          </div>
        </template>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script setup lang="ts">
import { withDefaults, computed, ref, watch, onMounted, markRaw } from 'vue'
import { ElDialog, ElTimeline, ElTimelineItem } from 'element-plus'
import { Check, Close, MoreFilled } from '@element-plus/icons-vue'
import { flowRunApi } from '@/api/modules/flow/flowRun'

const props = withDefaults(defineProps<{ visible: boolean; pInstanceId?: string; fInstanceName?: string }>(), {
  visible: false
})
const emits = defineEmits(['update:visible'])

const dialogVisible = computed(() => props.visible)
const title = computed(() => {
  return `${props.fInstanceName} - 流转记录`
})

const loading = ref(false)
const data = ref([] as any[])

const getHis = () => {
  if (props.pInstanceId) {
    loading.value = true
    flowRunApi.findTask(props.pInstanceId).then(resp => {
      if (resp.success) {
        data.value = resp.data.map((t: any) => {
          return getProps(t)
        })
        console.log(data.value)
      }
      loading.value = false
    })
  }
}

const getProps = (item: any) => {
  const props = {
    active: false,
    time: item.taskEndTime,
    type: 'info',
    icon: markRaw(Check),
    size: 'normal',
    vars: item.taskVariables,
    name: item.taskName
  }
  if (!item.taskEndTime) {
    //待办节点
    props.active = true
    props.icon = markRaw(MoreFilled)
    props.type = 'primary'
    props.time = item.taskStartTime
    props.size = 'large'
  } else if (item.taskVariables.pass == false) {
    props.type = 'danger'
    props.icon = markRaw(Close)
  } else {
    props.type = 'success'
    props.icon = markRaw(Check)
  }
  return props
}

onMounted(getHis)
watch(
  () => props.pInstanceId,
  () => {
    getHis()
  }
)

const handleCancel = () => {
  emits('update:visible', false)
}
</script>

<style lang="scss" scoped>
.task,
.user {
  margin-bottom: 2px;
}
.label {
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
  width: 60px;
  margin-right: 8px;
  &::after {
    content: ':';
  }
}
.context {
  color: $--color-text-secondary;
}
</style>
